import React, { PureComponent } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import { Form, Divider, Card, Input, Select, Modal, Row, Col } from 'antd';
import globalConstant from '../../utils/globalConstant';
import DescriptionList from '../../components/DescriptionList';

const { Description } = DescriptionList;

const orderType = {
  CHECK_STATUS_PASS: '审核通过',
  CHECK_STATUS_UNPASS: '审核不通过',
};

@connect(({ packageOrder, general, loading }) => ({
  packageOrder,
  general,
  loading: loading.models.packageOrder,
}))
@Form.create()
export default class ShowUserInfo extends PureComponent {
  state = {
    showCheckVisible: false,
  };
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'general/getworkerList',
    });
    dispatch({
      type: 'packageOrder/getPackageOrderDetail',
      payload: {
        id: this.props.data,
      },
    });
  }
  handleShowCheckModal=() => {
    this.setState({
      showCheckVisible: true,
    });
  }
  handleCancel=() => {
    this.setState({
      showCheckVisible: false,
    });
  }
  handleCheckStatusChange = (value) => {
    console.log(value);
    console.log(this.props.packageOrder.packageOrderInfo.id);
    Modal.confirm({
      title: '订单审核',
      content: (
        <div>
          {
            this.props.packageOrder.packageOrderInfo.orderType === 'NETWORK_ORDER_TYPE_NEW' ? (
              <Input.TextArea id="accountInfo" placeholder="请输入宽带账号信息或者备注" autosize={{ minRows: 4, maxRows: 6 }} />
            ) : `确定${orderType[value]}?`
          }
        </div>
      ),
      onOk: () => {
        const { dispatch } = this.props;
        dispatch({
          type: 'packageOrder/checkOrder',
          payload: {
            id: this.props.packageOrder.packageOrderInfo.id,
            isChecked: value === 'CHECK_STATUS_PASS',
            netAccountInfo: window.document.getElementById('accountInfo') && window.document.getElementById('accountInfo').value,
          },
          callback: () => {
            dispatch({
              type: 'packageOrder/getPackageOrderDetail',
              payload: {
                id: this.props.data,
              },
            });
          },
        });
      },
    });
  }
  handleMasterChange = (value) => {
    Modal.confirm({
      title: '状态修改',
      content: (
        <div>
          <p>确定修改状态?</p>
        </div>
      ),
      onOk: () => {
        const { dispatch } = this.props;
        dispatch({
          type: 'packageOrder/assignMaster',
          payload: {
            id: this.props.packageOrder.packageOrderInfo.workId,
            workerId: value,
          },
          callback: () => {
            dispatch({
              type: 'packageOrder/getPackageOrderDetail',
              payload: {
                id: this.props.data,
              },
            });
          },
        });
      },
    });
  }
  handleChange =(value) => {
    Modal.confirm({
      title: '状态修改',
      content: (
        <div>
          <p>确定修改状态?</p>
        </div>
      ),
      onOk: () => {
        this.props.dispatch({
          type: 'packageOrder/updateIsReward',
          payload: {
            id: this.props.data,
            isReferenceReward: value,
          },
          callback: () => {
            this.props.dispatch({
              type: 'packageOrder/getPackageOrderDetail',
              payload: {
                id: this.props.data,
              },
            });
            this.props.refreshList();
          },
        });
      },
    });
  }
  render() {
    const { packageOrderInfo } = this.props.packageOrder;
    const { workerList } = this.props.general;
    const { showCheckVisible } = this.state;
    const checkStatusList = [{ value: 'CHECK_STATUS_UNCHECKED', label: '未审核', disabled: true }, { value: 'CHECK_STATUS_PASS', label: '审核通过', disabled: false }, { value: 'CHECK_STATUS_UNPASS', label: '审核不通过', disabled: false }];
    return (
      <Card loading={this.props.loading} bordered={false}>
        <DescriptionList size="large" title="订单信息" style={{ marginBottom: 32 }} col={2}>
          <Description term="订单编号">{packageOrderInfo.orderNo}</Description>
          <Description term="订单类型">{packageOrderInfo.orderTypeDesc}</Description>
          <Description term="创建时间">{moment(packageOrderInfo.createTime).format(globalConstant.dateFormat)}</Description>
          <Description term="价格">{packageOrderInfo.orderPrice}</Description>
          <Description term="支付状态">{packageOrderInfo.payStatusDesc}</Description>
        </DescriptionList>
        <Divider style={{ marginBottom: 32 }} />
        <DescriptionList size="large" title="套餐信息" style={{ marginBottom: 32 }} col={2}>
          <Description term="套餐编号">{packageOrderInfo.packagesId}</Description>
          <Description term="套餐名称">{packageOrderInfo.packagesName}</Description>
          <Description term="价格">{packageOrderInfo.packagesPrice}</Description>
          <Description term="带宽">{packageOrderInfo.packagesSpeed}</Description>
          <Description term="套餐时长">{packageOrderInfo.packagesDuration}</Description>
          <Description
            term="生效时间"
          >{moment(packageOrderInfo.effectiveTime).format(globalConstant.dateFormat)}
          </Description>
          <Description
            term="失效时间"
          >{moment(packageOrderInfo.effectiveTime).format(globalConstant.dateFormat)}
          </Description>
        </DescriptionList>
        <Divider style={{ marginBottom: 32 }} />
        <DescriptionList size="large" title="用户信息" style={{ marginBottom: 32 }} col={2}>
          <Description term="用户姓名">{packageOrderInfo.userName}</Description>
          <Description term="联系电话">{packageOrderInfo.userMobile}</Description>
          <Description term="联系地址">{packageOrderInfo.userAddr}</Description>
          <Description term="联系邮箱">{packageOrderInfo.userEmail}</Description>
          <Description term="认证状态">{packageOrderInfo.userIsAuthed}</Description>
        </DescriptionList>
        <Divider style={{ marginBottom: 32 }} />
        <DescriptionList size="large" title="报装信息" style={{ marginBottom: 32 }} col={2}>
          <Description term="报装地区">{packageOrderInfo.installAddress}</Description>
          <Description term="报装地址">{packageOrderInfo.installAddress}</Description>
          {
            packageOrderInfo.orderType === 'NETWORK_ORDER_TYPE_NEW' ? (
              <Description term="接单师傅">
                <Select
                  value={packageOrderInfo.workerId}
                  style={{ width: 120 }}
                  onChange={this.handleMasterChange}
                >
                  {
                    workerList.map((item, index) => {
                      return (
                        <Select.Option
                          key={index.toString()}
                          value={item.id}
                        >
                          {item.userName}
                        </Select.Option>
                      );
                    })
                  }
                </Select>
              </Description>
            ) : (
              <Description term="师傅名字">
                {packageOrderInfo.workerName}
              </Description>
            )
          }
          {
            packageOrderInfo.checkStatus === 'CHECK_STATUS_PASS' ? (
              <Description term="订单审核">
                  无须操作
              </Description>
              ) :
              (
                <Description term="订单审核">
                  <Select
                    value={packageOrderInfo.checkStatus}
                    style={{ width: 120 }}
                    onChange={this.handleCheckStatusChange}
                  >
                    {
                      checkStatusList.map((item, index) => {
                        return (
                          <Select.Option
                            key={index.toString()}
                            value={item.value}
                            disabled={item.disabled}
                          >
                            {item.label}
                          </Select.Option>
                        );
                      })
                    }
                  </Select>
                </Description>
              )
          }
          <Description term="联系电话">{packageOrderInfo.userContactPhone}</Description>
          <Description term="审核状态">{packageOrderInfo.checkStatusDes}</Description>
          <Description term="状态追踪">{packageOrderInfo.workOrderStatus}</Description>
          <Description term="推荐人联系电话">{packageOrderInfo.referencePhone}</Description>

          <Description term="奖金是否发放">
            <Select
              disabled={!!packageOrderInfo.isReferenceReward}
              value={packageOrderInfo.isReferenceReward ? 'true' : 'false'}
              style={{ width: 80 }}
              onChange={this.handleChange}
            >
              <Select.Option value="true">是</Select.Option>
              <Select.Option value="false">否</Select.Option>
            </Select>
          </Description>
        </DescriptionList>


        <Modal
          visible={showCheckVisible}
          title="订单审核"
          onCancel={this.handleCancel}
          footer={null}
          destroyOnClose
        >
          <Row>
            <Col span={12}>审核通过</Col>
            <Col span={12}>审核不通过</Col>
          </Row>
        </Modal>
      </Card>
    );
  }
}
